<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Focus Admin: Knob</title>

    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- Styles -->
    <link href="css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="css/lib/themify-icons.css" rel="stylesheet">
    <link href="css/lib/menubar/sidebar.css" rel="stylesheet">
    <link href="css/lib/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/lib/helper.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


  </head>

  <body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
      <div class="nano">
        <div class="nano-content">
          <div class="logo"><a href="index.html"><!-- <img src="images/logo.png" alt="" /> --><span>Focus</span></a></div>
          <ul>
            <li class="label">Main</li>
            <li><a class="sidebar-sub-toggle"><i class="ti-home"></i> Dashboard <span class="badge badge-primary">2</span> <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="index.html">Dashboard 1</a></li>
                <li><a href="index.html">Dashboard 2</a></li>
                
                
                
              </ul>
            </li>

            <li class="label">Apps</li>
            <li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>  Charts  <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="chart-flot.html">Flot</a></li>
                <li><a href="chart-morris.html">Morris</a></li>
                <li><a href="chartjs.html">Chartjs</a></li>
                <li><a href="chartist.html">Chartist</a></li>
                <li><a href="chart-peity.html">Peity</a></li>
                <li><a href="chart-sparkline.html">Sparkle</a></li>
                <li><a href="chart-knob.html">Knob</a></li>
              </ul>
            </li>
            <li><a href="app-event-calender.html"><i class="ti-calendar"></i> Calender </a></li>
            <li><a href="app-email.html"><i class="ti-email"></i> Email</a></li>
            <li><a href="app-profile.html"><i class="ti-user"></i> Profile</a></li>
            <li><a href="app-widget-card.html"><i class="ti-layout-grid2-alt"></i> Widget</a></li>
            <li class="label">Features</li>
            <li><a class="sidebar-sub-toggle"><i class="ti-layout"></i> UI Elements <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="ui-typography.html">Typography</a></li>
                <li><a href="ui-alerts.html">Alerts</a></li>

                <li><a href="ui-button.html">Button</a></li>
                <li><a href="ui-dropdown.html">Dropdown</a></li>

                <li><a href="ui-list-group.html">List Group</a></li>

                <li><a href="ui-progressbar.html">Progressbar</a></li>
                <li><a href="ui-tab.html">Tab</a></li>

              </ul>
            </li>
            <li><a class="sidebar-sub-toggle"><i class="ti-panel"></i> Components <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="uc-calendar.html">Calendar</a></li>
                <li><a href="uc-carousel.html">Carousel</a></li>
                <li><a href="uc-weather.html">Weather</a></li>
                <li><a href="uc-datamap.html">Datamap</a></li>
                <li><a href="uc-todo-list.html">To do</a></li>
                <li><a href="uc-scrollable.html">Scrollable</a></li>
                <li><a href="uc-sweetalert.html">Sweet Alert</a></li>
                <li><a href="uc-toastr.html">Toastr</a></li>
                <li><a href="uc-range-slider-basic.html">Basic Range Slider</a></li>
                <li><a href="uc-range-slider-advance.html">Advance Range Slider</a></li>
                <li><a href="uc-nestable.html">Nestable</a></li>

                <li><a href="uc-rating-bar-rating.html">Bar Rating</a></li>
                <li><a href="uc-rating-jRate.html">jRate</a></li>
              </ul>
            </li>
            <li><a class="sidebar-sub-toggle"><i class="ti-layout-grid4-alt"></i> Table <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="table-basic.html">Basic</a></li>

                <li><a href="table-export.html">Datatable Export</a></li>
                <li><a href="table-row-select.html">Datatable Row Select</a></li>
                <li><a href="table-jsgrid.html">Editable </a></li>
              </ul>
            </li>
            <li><a class="sidebar-sub-toggle"><i class="ti-heart"></i> Icons <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="font-themify.html">Themify</a></li>
              </ul>
            </li>
            <li><a class="sidebar-sub-toggle"><i class="ti-map"></i> Maps <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="gmaps.html">Basic</a></li>
                <li><a href="vector-map.html">Vector Map</a></li>
              </ul>
            </li>
            <li class="label">Form</li>
            <li><a href="form-basic.html"><i class="ti-view-list-alt"></i> Basic Form </a></li>
            <li class="label">Extra</li>
            <li><a class="sidebar-sub-toggle"><i class="ti-files"></i> Invoice <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="invoice.html">Basic</a></li>
                <li><a href="invoice-editable.html">Editable</a></li>
              </ul>
            </li>
            <li><a class="sidebar-sub-toggle"><i class="ti-target"></i> Pages <span class="sidebar-collapse-icon ti-angle-down"></span></a>
              <ul>
                <li><a href="page-login.html">Login</a></li>
                <li><a href="page-register.html">Register</a></li>
                <li><a href="page-reset-password.html">Forgot password</a></li>
              </ul>
            </li>
            <li><a href="../documentation/index.html"><i class="ti-file"></i> Documentation</a></li>
            <li><a><i class="ti-close"></i> Logout</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /# sidebar -->


    <div class="header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="float-left">
                        <div class="hamburger sidebar-toggle">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                        </div>
                    </div>
                    <div class="float-right">
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-bell"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">Recent Notifications</span>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">5 members joined today </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mariam</div>
                                                        <div class="notification-text">likes a photo of you</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Tasnim</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-email"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">2 New Messages</span>
                                        <a href="email.html">
                                            <i class="ti-pencil-alt pull-right"></i>
                                        </a>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/1.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <span class="user-avatar">John
                                    <i class="ti-angle-down f-s-10"></i>
                                </span>
                                <div class="drop-down dropdown-profile dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">Upgrade Now</span>
                                        <p class="trial-day">30 Days Trail</p>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-user"></i>
                                                    <span>Profile</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-email"></i>
                                                    <span>Inbox</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-settings"></i>
                                                    <span>Setting</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-lock"></i>
                                                    <span>Lock Screen</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-power-off"></i>
                                                    <span>Logout</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="content-wrap">
      <div class="main">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-8 p-r-0 title-margin-right">
              <div class="page-header">
                <div class="page-title">
                  <h1>Hello, <span>Welcome Here</span></h1>
                </div>
              </div>
            </div>
            <!-- /# column -->
            <div class="col-lg-4 p-l-0 title-margin-left">
              <div class="page-header">
                <div class="page-title">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active">Chart-Knob</li>
                  </ol>
                </div>
              </div>
            </div>
            <!-- /# column -->
          </div>
          <!-- /# row -->
          <section id="main-content">
            <div class="row">
              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Basic</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
                  </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Disable display input</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-displayInput=false value="35"> </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Cursor mode</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-cursor=true data-bgColor="#EEEEEE" data-fgColor="#FB6E52" data-thickness=.3 value="29"> </div>
                  <!-- /# card -->
                </div>
                <!-- /# column -->
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Angle offset</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-angleOffset=90 data-linecap=round value="35"> </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Angle offset and arc</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" data-rotation="anticlockwise" value="35"> </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>4-digit, step 0.1</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-min="-10000" data-displayPrevious=true data-max="10000" data-step=".1" value="0"> </div>
                  <!-- /# column -->
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Overloaded 'draw' method</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-displayPrevious=true data-bgColor="#EEEEEE" data-fgColor="#FB6E52" data-skin="tron" data-cursor=true value="75" data-thickness=".2">
                  </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Overloaded 'draw' method</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-displayPrevious=true data-bgColor="#2FB594" data-fgColor="#2FB594" data-skin="tron" data-thickness=".2" value="75">
                  </div>
                  <!-- /# card -->
                </div>
                <!-- /# column -->
              </div>

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Overloaded 'draw' method</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="200" data-angleOffset="180" data-bgColor="#237596" data-fgColor="#237596" data-skin="tron" data-thickness=".1" value="35"> </div>
                  <!-- /# column -->
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Responsive</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-width="75%" value="35">
                  </div>
                </div>
                <!-- /# card -->
              </div>
              <!-- /# column -->

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Read Only</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="knob" data-fgColor="chartreuse" data-thickness=".4" readonly value="22">
                  </div>
                  <!-- /# card -->
                </div>
                <!-- /# column -->
              </div>

              <div class="col-lg-4">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Infinite || iPod click wheel</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <div class="card-body m-t-15 text-center text-center">
                    <input class="infinite" value="0" data-width="200" data-thickness=".5" data-fgColor="#87CEEB" data-bgColor="#EEEEEE" data-displayInput="false" data-cursor=true>
                  </div>
                </div>
              </div>
            </div>
            <!-- /# row -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card nestable-cart">
                  <div class="card-title">
                    <h4>Superpose (clock)</h4>
                    <div class="card-title-right-icon">
                      <ul>

                      </ul>
                    </div>
                  </div>
                  <divclear:both; "></div>
								<div class="card-body m-t-15 text-center text-center ">
									<div class="superpose ">
										<div class="superclock ">
											<div class="superclock1 ">
												<input class="knob hour " data-min="0 " data-max="24 " data-bgColor="#EEEEEE " data-fgColor="#FB6E52 " data-displayInput=false data-width="300 " data-height="300 " data-thickness=".3 ">
											</div>
											<div class="superclock2 ">
												<input class="knob minute " data-min="0 " data-max="60 " data-bgColor="#EEEEEE " data-fgColor="#48CFAE " data-displayInput=false data-width="200 " data-height="200 " data-thickness=".45 ">
											</div>
											<div class="superclock3 ">
												<input class="knob second " data-min="0 " data-max="60 " data-bgColor="#EEEEEE " data-fgColor="#50C1E9 " data-displayInput=false data-width="100 " data-height="100 " data-thickness=".3 ">
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /# card -->
						</div>
						<!-- /# column -->
					</div>
					<!-- /# main content -->
				</section>
    		</div>
    	</div>
    </div>



    
    <!-- jquery vendor -->
    <script src="js/lib/jquery.min.js "></script> <script src="js/lib/jquery.nanoscroller.min.js "></script>
    <!-- nano scroller -->
    <script src="js/lib/menubar/sidebar.js "></script>
    <script src="js/lib/preloader/pace.min.js "></script>
    <!-- sidebar -->
    <script src="js/lib/bootstrap.min.js "></script>
    <!-- bootstrap -->


    <!--ION Range Slider JS-->
    <script src="js/lib/knob/jquery.knob.min.js "></script>
    <script src="js/lib/knob/knob.init.js "></script>
    <!-- scripit init-->
    <script src="js/scripts.js "></script>

    <script>
    </script>
</body>

</html>
